import { List, Row, Col, Button } from "antd";
import styles from './index.less';
import { FileFilled, FolderFilled } from '@ant-design/icons';
import ReactJson from 'react-json-view'
import { useState } from 'react';
import { getFlowZipFileList, getLogList } from "../service";
import { useEffect } from "react";
import { Empty } from "antd";
import { Divider, Timeline, Drawer } from "antd";

export default (props) => {

    const { id, publishFlow } = props;
    const [backupDirectory, setBackupDirectory] = useState({ directorys: [] });
    const [uploadDirectory, setUploadDirectory] = useState({ directorys: [] });
    const [loglist, setLogList] = useState([]);
    const [showDetail, setShowDetail] = useState(false);
    const [hoverDetail, setHoverDetail] = useState({});
    const notBackupDirectory = uploadDirectory.directorys.filter(i => !backupDirectory.directorys.map(i => i.path).includes(i.path));
    useEffect(() => {
        async function init() {
            const response = await getFlowZipFileList({ id });
            if (response.success) {
                const aa = response.data.filter(i => i.nodeType === 1);
                if (aa.length > 0) {
                    setBackupDirectory(aa[0]);
                }
                const aa2 = response.data.filter(i => i.nodeType === 2);
                if (aa2.length > 0) {
                    setUploadDirectory(aa2[0]);
                }
            }

            const r2 = await getLogList({ id });
            if (r2.success) {

                setLogList(r2.data);
            }

        }
        init();
    }, [id]);

    const nodeType = ["", "备份", "上传", "上传/覆盖", "执行脚本", "还原"];
    return <div>
        <Drawer 
        width={600}
        open={showDetail} title="查看详情" onClose={() => {
            setShowDetail(false);
            setHoverDetail({});


        }} >
            <div>

                <p>操作时间：{hoverDetail.created}</p>
                <p>操作人：{hoverDetail.userName}</p>
                <p>操作类型：{nodeType[hoverDetail.nodeType]}</p>
                <p>请求值：{<ReactJson src={JSON.parse(hoverDetail.context?hoverDetail.context:"{}")} />} </p>
                <p>返回值：{<ReactJson src={JSON.parse(hoverDetail.result?hoverDetail.result:"{}")} />} </p>
            </div>
        </Drawer>
        <Row>
            <Col span={18}>

                <Divider orientation="left">备份</Divider>
                <Row>
                    文件路径：  {publishFlow?.nodes?.filter(i => i.nodeType === 1).map(i => i.result).join("->")}
                </Row>
                <Divider orientation="left">发布</Divider>
                文件路径：  {publishFlow?.nodes?.filter(i => i.nodeType === 2).map(i => i.result).join("->")}
                <Row style={{ marginTop: "20px" }} gutter={[12]}>

                    <Col span={12}>
                        <div style={{ marginBottom: "12px" }}>上传的发布文件</div>

                        {backupDirectory.isDeleted ? <Empty description="备份目录已删除" /> : <List
                            style={{ marginBottom: "12px" }}
                            size="small"
                            bordered
                            key={"list1"}
                            dataSource={uploadDirectory.directorys}
                            renderItem={(item) =>
                                <List.Item>
                                    <div className={styles.directory}>
                                        <span >
                                            {item.type === 1
                                                ? <FileFilled style={{ color: "#ff21b9", marginRight: "4px", fontSize: "11px" }} />
                                                : <FolderFilled style={{ color: "#54aeff", marginRight: "4px" }} />}

                                            {item.path === ".." ? "" : <span>
                                                {item.path.split("\\")[item.path.split("\\").length - 1]}

                                            </span>}


                                        </span>


                                    </div></List.Item>}
                        />}

                    </Col>
                    <Col span={12}>
                        <div style={{ marginBottom: "12px" }}>上传未备份文件</div>


                        <List
                            style={{ marginBottom: "12px" }}
                            size="small"
                            bordered
                            key={"list2"}
                            dataSource={notBackupDirectory}
                            renderItem={(item) =>
                                <List.Item>
                                    <div className={styles.directory}>
                                        <span onClick={() => {
                                        }}>
                                            {item.type === 1
                                                ? <FileFilled style={{ color: "#ff21b9", marginRight: "4px", fontSize: "11px" }} />
                                                : <FolderFilled style={{ color: "#54aeff", marginRight: "4px" }} />}

                                            {item.path === ".." ? "" : <span>
                                                {item.path}
                                                <span style={{ color: "red", marginLeft: "10px", fontSize: "12px" }}>未备份</span>
                                            </span>}

                                        </span>
                                    </div></List.Item>}
                        />
                    </Col>
                </Row>


            </Col>

            <Col span={6}>

                <Divider orientation="left">敏感操作</Divider>
                <div style={{ padding: "24px" }}>   <Timeline

                    items={loglist.map(i => {
                        return {
                            children: <div>
                                <p style={{ marginBottom: "4px" }}>操作时间：{i.created}</p>
                                <p style={{ marginBottom: "4px" }}>操作人：{i.userName}</p>
                                <p style={{ marginBottom: "4px" }}>
                                    操作类型：{nodeType[i.nodeType]} <Button size="small"
                                        onClick={() => {
                                            setShowDetail(true);
                                            setHoverDetail(i);
                                        }}
                                        type="link">查看详情</Button></p>
                            </div>,
                        }
                    })}

                />
                </div>
            </Col>
        </Row>
    </div>
}